<!-- 投递简历 -->
<template>
  <div>
    <div class="card" v-for="item in recode" :key="item.id">
        <div class="title">{{item.job_name}}</div>
        <div class="company">
          <span class="company-name">
            <el-icon :size="16" class="com-img">
              <i-ep-OfficeBuilding />
            </el-icon>
            {{ item.company_name }}</span>
        </div>
        <div class="salary">{{ item.job_salary }}</div>
        <el-button @click="cancel(item.id)" class="cancelBtn" type="danger" round size="small">取消投递</el-button>
    </div>
  </div>
</template>
<script setup>
    import {  watch,inject,ref } from 'vue'
    import { useRouter } from 'vue-router'
    import checkLoginStatus from '@/hooks/checkLoginStatus.js'
    import login from '@/hooks/login.js'
    const router = useRouter()
    const recode=ref([])
    const $axios=inject('$axios')
    const $root=inject('$root')
    const getRecode = ()=>{
      $axios.get($root + `/postresume/`)
      .then(r => {
      if (r.data.code == 200) {
        recode.value = r.data.data
      }
    })
  }
  // 取消投递
  const cancel = (id) => {
  $axios.post($root + `/postresume/cancel/${id}/`)
    .then(r => {
      if (r.data.code == 200) {
        getRecode()
      }
    })
}
    //侦听器
    watch( () => router.currentRoute.value.name, (name) => {
      if (name == "recode") {
        checkLoginStatus(getRecode, login)
      }
    }, { immediate: true, deep: true })
</script>
<style scoped>
.cancelBtn {
  position: absolute;
  bottom: 15px;
  right: 8px;
}
.com-img{
  position: relative;
  top: 4px;
}
</style>